<template>
  <BasicForm
    ref="formElRef"
    :class="'jee-select-demo-form'"
    :labelCol="{ span: 5 }"
    :wrapperCol="{ span: 15 }"
    :showResetButton="false"
    :showSubmitButton="false"
    :schemas="schemas"
    :actionColOptions="{ span: 24 }"
    @submit="handleSubmit"
    @reset="handleReset"
    style="height: 100%"
  >
    <template #jAreaLinkage="{ model, field }">
      <JAreaLinkage v-model:value="model[field]" :showArea="true" :showAll="false" />
    </template>
    <template #jAreaLinkage1="{ model, field }">
      <JAreaLinkage :disabled="isDisabledAuth(['demo.dbarray'])" v-model:value="model[field]" :showArea="true" :showAll="false" />
    </template>
    <template #JPopup="{ model, field }">
      <JPopup v-model:value="model[field]" :formElRef="formElRef" code="report_user" :fieldConfig="[{ source: 'username', target: 'pop1' }]" />
    </template>
    <template #JAreaSelect="{ model, field }">
      <JAreaSelect v-model:value="model[field]" />
    </template>
    <template #MyCheckbox="{ model, field }">
      <MyCheckbox v-model:value="model[field]" dictCode="remindMode" />
    </template>
    <template #JInput="{ model, field }">
      <JInput v-model:value="model[field]" :type="model['jinputtype']" />
    </template>
    <template #dargVerify="{ model, field }">
      <BasicDragVerify v-model:value="model[field]" />
    </template>
  </BasicForm>
</template>
<script lang="ts">
  import { computed, defineComponent, unref, ref } from "vue"
  import { BasicForm, ApiSelect, JAreaLinkage, JPopup, JAreaSelect, FormActionType, MyCheckbox, JInput, JEllipsis } from "/@/components/Form"
  import { useMessage } from "/@/hooks/web/useMessage"
  import { optionsListApi } from "/@/api/demo/select"
  import { useDebounceFn } from "@vueuse/core"
  import { schemas } from "./jeecgComponents.data"
  import { usePermission } from "/@/hooks/web/usePermission"
  import { BasicDragVerify } from "/@/components/Verify"

  export default defineComponent({
    name: "JeecgComponents",
    components: {
      BasicForm,
      ApiSelect,
      JAreaLinkage,
      JPopup,
      JAreaSelect,
      MyCheckbox,
      JInput,
      JEllipsis,
      BasicDragVerify,
    },
    setup() {
      const { isDisabledAuth } = usePermission()
      const check = ref(null)
      const formElRef = ref<Nullable<FormActionType>>(null)
      const { createMessage } = useMessage()
      const keyword = ref<string>("")
      const submitButtonOptions = ref({
        text: "确定",
      })
      const searchParams = computed<Recordable>(() => {
        return { keyword: unref(keyword) }
      })

      function onSearch(value: string) {
        keyword.value = value
      }

      return {
        schemas,
        formElRef,
        isDisabledAuth,
        optionsListApi,
        submitButtonOptions,
        onSearch: useDebounceFn(onSearch, 300),
        searchParams,
        handleReset: () => {
          keyword.value = ""
        },
        handleSubmit: (values: any) => {
          console.log("values:", values)
          createMessage.success("click search,values:" + JSON.stringify(values))
        },
        check,
      }
    },
  })
</script>
<style lang="less" scoped>
  /**展示不全*/
  .jee-select-demo-form .ant-col-5 {
    flex: 0 0 159px;
    max-width: 159px;
  }
</style>
